<template>
  <div id="box">
      <div class="content">
          <div class="title">
              <div class="title_dic">
                  <span>热门品牌</span>
                  <span>国际经典</span>
                  <span>品质保证</span>
              </div>
              <div class="btns">
                  <div @click="clickBtn" :class="[onoff?'':'on']"><van-icon name="arrow-left" size="12" /></div>
                  <div @click="clickBtn" :class="[onoff?'on':'']"><van-icon name="arrow" size="12" /></div>
              </div>
          </div>
          <div class="items">
              <div class="items_content" :class="[onoff?'':'on']">
                  <img class="item" v-for="i in data" :key="i.id" v-lazy="i.logo" />
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            data:null,
            onoff:true,
        }
    },
    async mounted(){
        const res = await this.$.getHomeBrand();
        this.data = res.data.result;
    },
    methods:{
        clickBtn(){
            this.onoff = !this.onoff
            console.log(this.onoff)
        },
    }
}
</script>

<style lang="less" scoped>
    #box{
        width: 100%;
        height: 460px;
        background: rgb(245,245,245);
        .content{
            width: 1240px;
            height: 100%;
            margin:0 auto;
            .title{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                padding:45px 10px;
                & :nth-child(1){font-size:32px; margin-left:2px;margin-right: 2px};
                & :nth-child(2){font-size: 14px;margin-bottom: 2px; margin-left:2px;margin-right: 2px}
                & :nth-child(3){font-size: 14px;margin-bottom: 2px; margin-left:2px;margin-right: 2px}
                .btns{
                    display: flex;
                    font-size: 10px;
                    text-align: center;
                    line-height: 20px;
                    &>div{width: 20px;height: 20px;font-size: 12px;background: #CCCCCC; color:white;}
                    &>div.on{background:#27BA9B}
                }
            }
            .items{
                width: 100%;
                height: 345px;
                padding-bottom: 40px;
                overflow: hidden;
                .items_content{
                    &.on{margin-left:-1250px}
                    display: flex;
                    transition: 1s;
                    .item{
                        display: block;
                        width: 240px;
                        height: 305px;
                        margin:0 5px;
                    }
                }
            }
        }
    }
</style>